$w: 1200px; // 版心

$carouselHeight: 450px; // 轮播图父级div的高度
$marginBottomTags: 29px; // 热门标签与下面div的外边距
$marginTopMain: 15px; // 页面展示区与头部背景的上边距

$layoutBg: #F6F6F6; // 背景色

$textColor: #748594; // 浅一点的灰色
$textColor2: #566573; // 深一点的灰色
$textColor3: #555555; // 深一点的灰色
$textColor4: #9a9a9a; // 亮一点的灰色
$textColor5: #181818; // 导航栏的背景色
$textColor6: #00a7eb; // 网站logo文字颜色
$textColor7: #DFDFDF; // 浅一点的白色边框
$textColor8: #005980; // 链接颜色


$textHoverColor: #337ab7; // 鼠标掠过时的颜色
$textHoverColor2: #409EFF; // 鼠标掠过时的颜色
$textHoverColor3: #000000; // 鼠标掠过时的颜色
$textHoverColor4: #aeb2bf; // 鼠标掠过时的颜色
$textHoverColor5: rgba(146, 146, 146, .1); // 鼠标掠过时的颜色

// 标签颜色
$tagColor: #8A9B0F;
$tagColor2: #EB6841;
$tagColor3: #3FB8AF;
$tagColor4: #FE4365;
$tagColor5: #FC9D9A;
$tagColor6: #EDC951;
$tagColor7: #C8C8A9;
$tagColor8: #83AF9B;
$tagColor9: #036564;
$tagColor10: #3299BB;

// 版心
@mixin w {
  width: $w;
  margin: 0 auto;
}

// 在父元素的上面 定位的提示框 $width：弹出框的宽度 $xPosition：小三角的位置，默认是居中
@mixin tooltip($width:200px,$xPosition:0) {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -130%);
  color: $textColor3;
  background: #FFFFFF;
  width: $width;
  border-radius: 5px;
  padding: 10px 5px;
  @include boxShadow;
  @include transitionStyle(0.2s);
  &::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) rotate(45deg);
    margin-top: -5px;
    box-shadow: 2px 1px 2px rgba(146, 146, 146, .1);
    margin-left: $xPosition;
  }
}

// 清除浮动 加在浮动元素的父级上
@mixin clearfix {
  &:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

// 首页右侧 标签、友链、三级推荐、四级推荐 公共样式
@mixin tagsBasicStyle {
  padding: 30px 30px;
  background: #ffffff;
  @include boxShadow;
}

// 文字在一行上显示，多余的显示...
@mixin textOneLine {
  white-space: nowrap; // 超出一行的文字不换行，在一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 隐藏的文字显示 ...
}

// 文字在自定义的行数上显示...
@mixin textNumberLine($number) {
  overflow: hidden; // 超出隐藏
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $number;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis; // 隐藏的文字显示 ...
}

// 鼠标滑过放大图片 加在图片标签的父级上
@mixin scaleImg {
  overflow: hidden;
  .el-image {
    width: 100%;
    height: 100%;
    @include transitionStyle;
  }
  &:hover .el-image {
    transform: scale(1.1);
    cursor: pointer;
  }
}

// 在图片上面的h2标签样式 相对于父级定位
@mixin h2InImg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  z-index: 1;
  padding: 10px 20px;
  font-weight: 400;
  font-size: 16px;
}

// 座右铭 相对于父级位置定位
@mixin motto {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: $textColor3;
  z-index: 1;
}

// 返回首页按钮样式
@mixin tabHome {
  cursor: pointer;
  background: $textColor5;
  color: #FFFFFF;
  &:hover {
    color: $textColor6;
  }
}

// 查看更多提示字的样式
@mixin hasMoreTxt {
  height: 30px;
  line-height: 30px;
  text-align: center;
  span {
    display: inline-block;
    border-radius: 25px;
    width: 120px;
    font-size: 16px;
    color: $textHoverColor4;
    cursor: pointer;
    background: rgba(0,0,0,.8);
    &:hover {
      color: #f0f8ff;
    }
  }
}
// 没有更多提示字的样式
@mixin noMoreTxt {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: $textHoverColor4;
}



// 半透明黑色遮罩 相对于父级的宽高
@mixin mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  opacity: 0.5;
  z-index: 1;
  @include transitionStyle;
}

// 热门标签下的h2标签 title样式 热门标签、关注我、特别推荐、推荐文章
@mixin hotTagsH2 {
  font-size: 18px;
  color: #282828;
  font-weight: 600;
  padding-bottom: 15px;
  margin-bottom: 25px;
  position: relative;

  &::after {
    content: "";
    background-color: #282828;
    left: 0;
    width: 50px;
    height: 2px;
    bottom: 0;
    position: absolute;
    @include transitionStyle;
  }
}

// 公共过渡样式
@mixin transitionStyle($transitionTime:0.5s) {
  -moz-transition: all $transitionTime ease;
  -webkit-transition: all $transitionTime ease;
  -ms-transition: all $transitionTime ease;
  -o-transition: all $transitionTime ease;
  transition: all $transitionTime ease;
}

//公共盒子阴影
@mixin boxShadow {
  box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);
}
